<template>
  <view v-if="false">
    <view class="my-user-info">
      <view class="user-info-item">
        <view>头像</view>
        <button
          class="avatar"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <image :src="avatarUrl" class="avatar-img"></image>
        </button>
      </view>
      <view class="user-info-item">
        <view>当前折扣类型</view>
        <view>员工价</view>
      </view>
      <view class="user-info-item">
        <view>手机号</view>
        <view>
          <button
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
            v-if="false"
          >
            获取手机号
          </button>
          138XXXX5566
        </view>
      </view>
    </view>
    <tabbar></tabbar>
  </view>
  <view class="my-info-container">
    <view class="header">
      <image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill" />
      <view class="user-info">
        <text class="user-name">{{ userInfo.name }}</text>
        <text class="user-role">{{ userInfo.role }}</text>
      </view>
    </view>
    <view class="options">
      <view class="option-item" @click="onEditProfile">
        <text>编辑资料</text>
      </view>
      <view class="option-item" @click="onSettings">
        <text>设置</text>
      </view>
      <view class="option-item" @click="onLogout">
        <text>退出登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import useUserStore from "@/store/user.js";
import { decryptPhoneNumber } from "./../../utils/wxbiz";
import { GET_SESSION_KEY } from "../../utils/token";
let useStore = useUserStore();
const avatarUrl = ref("");
onShow(() => {
  avatarUrl.value = uni.getStorageSync("avatar");
  uni.hideTabBar({
    animation: false,
  });
  useStore.activeTab = 3;
  uni.getUserInfo({
    desc: "登录数据",
    success: (res) => {
      console.log("res:", res);
    },
    fail: (error) => {
      err.value = error;
      reject(error);
    },
  });
});
//更改头像
const onChooseAvatar = async (e) => {
  console.log("e:", e);

  const tempFilePath = e.detail.avatarUrl; //上传的图片地址
  uni.setStorageSync("avatar", tempFilePath);
  const maxSizeInBytes = 1024 * 1024; // 限制大小为1MB
  uni.getFileSystemManager().getFileInfo({
    filePath: tempFilePath,
    success: (res) => {
      const fileSize = res.size;
      if (fileSize > maxSizeInBytes) {
        //如果上传的图片大小超过1MB，进行提示
        uni.$showMsg("请上传小于1MB的图片");
        return;
      }
      console.log("tempFilePath:", tempFilePath);

      //图片大小符合，替换图片
      avatarUrl.value = tempFilePath;
      //将更改的图片上传到服务器
      // uni.uploadFile({
      //   url: BASE_URL + "/wx-api/upload/avatar",
      //   filePath: avatarUrl.value,
      //   name: "file",
      //   header: {
      //     Authorization: "Bearer " + token, // 将 token 添加到请求的 header 中
      //   },
      //   success(res) {
      //     let fileRes = JSON.parse(res.data);
      //     uni.$showMsg(fileRes.message);
      //   },
      // });
    },
  });
};
const getPhoneNumber = async (e) => {
  console.log("e:", e);
  if (e.detail.errMsg !== "getPhoneNumber:ok") {
    uni.$showMsg("获取手机号失败");
    return;
  }
  const encryptedData = e.detail.encryptedData;
  const iv = e.detail.iv;
  const sessionKey = GET_SESSION_KEY();
  if (!sessionKey) {
    uni.$showMsg("sessionKey不存在");
    return;
  }
  const phoneNumber = decryptPhoneNumber(encryptedData, iv, sessionKey);
  console.log("phoneNumber:", phoneNumber);
};
</script>

<style lang="scss">
.my-user-info {
  height: 100vh;
  background-color: #fff;
  padding: 18px;
  .user-info-item {
    padding: 12px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(191, 191, 193, 1);
  }
  .avatar {
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    background-color: rgba(217, 217, 217, 1);
    border-radius: 50%;
    border: 2rpx solid rgba(217, 217, 217, 1);
    box-shadow: 1rpx 1rpx 8rpx rgb(74, 71, 71);
    padding: 0;
    margin: 0;

    .avatar-img {
      width: 100%;
      height: 100%;
    }
  }
  .top-box {
    height: 240rpx;
    background-color: #0aa671;
    display: flex;
    flex-direction: column;
    align-items: center;

    .nickname {
      color: white;
      margin-top: 20rpx;
      text-align: center;
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}
.my-info-container {
  padding: 20px;
  background-color: #f8f8f8;
  height: 100vh; /* 设置页面高度 */
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* 圆形头像 */
  margin-right: 20px;
  border: 2px solid #4b9fef; /* 头像边框 */
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.user-role {
  font-size: 16px;
  color: #666;
}

.options {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.option-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  color: #007aff; /* 按钮字体颜色 */
}

.option-item:last-child {
  border-bottom: none; /* 最后一项去掉边框 */
}

.option-item:hover {
  background-color: #f0f0f0; /* 悬停效果 */
}
</style>
